<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>进度条动画效果</title>
		<style type="text/css">
			.out {
				width: 300px;
				height: 20px;
				margin: 300px auto;
				border: 1px solid #00B4FF;
				box-sizing: border-box;
			}

			.inner {
				width: 200px;
				height: 100%;
				background: #00B4FF;
			}
			
			.inner_shade{
				background-image: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.7) 70%, transparent);
				width: 100px;
				height: 100%;
				position: relative;
				left: -50%;
				-webkit-animation: myfirst 3s;
				-webkit-animation-iteration-count:infinite;
				-webkit-animation-direction: normal;
			}
			
			@keyframes myfirst
			{
				0% { left: -50%; }
				100% { left: 100%; } 
			}
			
			@-webkit-keyframes myfirst
			{
				0% { left: -50%; }
				100% { left: 100%; } 
			}
		</style>
	</head>

	<body>
		<div class="out"><div class="inner"><div class="inner_shade"></div></div></div>
	</body>
</html>
<script>
</script>
